<template>
  <!-- 登入页面 -->
  <globalBox>
    <div class="loginView">
      <div class="loginView-leftbox">
        <div><img class="loginView-leftbox-logopng" src="@img/djlogo.png" /></div>
        <!-- <div><img class="loginView-leftbox-bgomhg" src="@img/previewFix.jpg" /></div> -->
        <video class="loginView-leftbox-videopm" height="100%" autoplay="autoplay" loop="loop" muted="muted">
          <source src="@img/video_2000210503.mp4" type="video/mp4" />
          <!-- <source src="movie.ogg" type="video/ogg" /> -->
          您的浏览器不支持Video标签。
        </video>
      </div>
      <div class="loginView-rightbox">
        <loginInput />
      </div>
    </div>
  </globalBox>
</template>

<script lang="ts">
import globalBox from '@com/base/globalBox/globalBox.vue';
import loginInput from '@views/commonModule/components/loginInput/loginInput.vue';
export default {
  components: {
    globalBox,
    loginInput,
  },
};
</script>

<style lang="less" scoped>
.loginView {
  display: flex;
  height: 100%;
  &-leftbox {
    min-width: 720px;
    height: 100%;
    width: 60%;
    box-shadow: 1px 2px 6px rgb(109, 109, 109);
    background: rgb(35, 50, 95);
    flex: 1;
    position: relative;
    overflow: hidden;
    &-logopng {
      padding: 10px;
      width: 30px;
      position: relative;
      z-index: 1;
    }
    &-bgomhg {
      position: absolute;
      top: 0px;
      z-index: 0;
      left: -320px;
    }
    &-videopm {
      width: auto;
      height: 100%;
      position: absolute;
      top: 0px;
      left: -200px;
    }
  }
  &-rightbox {
    min-width: 480px;
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>
